/*
   学习目标：useEffect挂载时和卸载时，综合写法
*/
// 1. 先导入useEffect
import React, { useEffect, useState } from 'react'

export default function App() {
    // 准备组件的显示与隐藏
    const [isShow, setIsShow] = useState(true)
    
  return (
    <div>
       {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  )
}

function Child(){
    const resizeFn=()=>{
        console.log('123  ----->  ', 123);
    }
    // 1 挂载后，开启监听
    // 1. 分开写:  逻辑复杂时,拆开写
    // useEffect(() => {
    //  window.addEventListener('resize',resizeFn)
    // }, [])
    // 3 卸载时清除监听事件
    // useEffect(() => {
    //  // 🔔useEffect接收的回调函数中，返回一个函数，代表卸载是执行改函数
    //  return ()=>{
    //      console.log(' 我被卸载了 ----->  ', );
    //      window.removeEventListener('resize',resizeFn)
    //  }
    // }, [])

    // 2. 合起来: 逻辑简单,合起来写,效果一样
    useEffect(() => {
      window.addEventListener('resize',resizeFn)
      return ()=>{
        console.log('我被卸载了  ----->  ', );
        window.removeEventListener('resize',resizeFn)
      }
    }, [])
    
    
    return <div>我是子组件</div>;
}
